document.addEventListener('DOMContentLoaded', function () {
    const canvasElement = document.getElementById('myCanvas');
    const canvas = new Canvas(canvasElement);

    // 添加文本按钮的点击事件
    document.getElementById('addButtonText').addEventListener('click', function () {
        const textInput = document.getElementById('textInput');
        const text = textInput.value; // 获取输入框中的文本

        var textAlignment = document.getElementById('textAlignment');

        // 假设TextWedge类在TextWedge.js中定义，并且接受文本和其他参数
        const textWedge = new TextWedge({
            text: text,
            fontSize: 60,
            color: 'black',
            x: 100,
            y: 100,
            textAlign: textAlignment.value,
            onClickEdit: () => {
                console.log('onClickEdit', textWedge);
            },
        });
        canvas.add(textWedge);

        // 清空输入框（可选）
        textInput.value = '';
    });

    // 添加文本按钮的点击事件
    document.getElementById('setButtonText').addEventListener('click', function () {
        const textInput = document.getElementById('textInput');
        const text = textInput.value; // 获取输入框中的文本
        const textWedge = canvas.getActiveObject();
        if (textWedge) {
            textWedge.setText(text);
            canvas.renderAll();
            // 清空输入框（可选）
            textInput.value = '';
        }
    });

    // 添加图片按钮的点击事件（这里可以简化为直接触发文件输入的点击）
    document.getElementById('addButtonImage').addEventListener('click', function () {
        const input = document.createElement('input');
        input.type = 'file';
        input.style.display = 'none';
        input.accept = 'image/*';

        input.addEventListener('change', (event) => {
            const selectedFiles = event.target.files;
            let imageUrl = URL.createObjectURL(selectedFiles[0]);

            let img = new Image();
            img.src = imageUrl;
            img.onload = () => {
                const imageWedge = new ImageWedge({
                    src: imageUrl,
                    width: 100,
                    height: (img.height / img.width) * 100,
                    x: 50,
                    y: 50,
                });
                canvas.add(imageWedge);
            };
        });

        document.body.appendChild(input);
        input.click();
        document.body.removeChild(input);
    });

    // 添加图片按钮的点击事件（这里可以简化为直接触发文件输入的点击）
    document.getElementById('exportButton').addEventListener('click', function () {
        const exportScale = document.getElementById('exportScale').value;

        if (exportScale == 1) {
            const dataURL = canvasElement.toDataURL('image/png');
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = `canvas.png`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } else {
            let offscreenCanvasElement = document.createElement('canvas');
            offscreenCanvasElement.width = canvasElement.width * exportScale;
            offscreenCanvasElement.height = canvasElement.height * exportScale;

            const offscreenCanvas = new Canvas(offscreenCanvasElement);
            const jsonStr = canvas.toJSON();
            let json;

            try {
                json = JSON.parse(jsonStr);
            } catch (error) {
                console.log(error);
            }

            if (json) {
                json.objects.forEach((obj) => {
                    obj.width = obj.width * exportScale;
                    obj.height = obj.height * exportScale;
                    obj.x = obj.x * exportScale;
                    obj.y = obj.y * exportScale;
                    obj.rotationCenterX = obj.rotationCenterX * exportScale;
                    obj.rotationCenterY = obj.rotationCenterY * exportScale;
                    obj.hasDeleteButton = false;
                    obj.hasResizeButton = false;
                    obj.hasEditButton = false;
                    obj.buttons = [];

                    if (obj.text) {
                        obj.fontSize = obj.fontSize * exportScale;
                    }
                });
                console.log(json);

                offscreenCanvas.loadFromJSON(JSON.stringify(json));

                setTimeout(() => {
                    const dataURL = offscreenCanvasElement.toDataURL('image/png');
                    const link = document.createElement('a');
                    link.href = dataURL;
                    link.download = `canvas-x${exportScale}.png`;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }, 200);
            }
        }
    });

    // 添加图片按钮的点击事件（这里可以简化为直接触发文件输入的点击）
    document.getElementById('toJSON').addEventListener('click', function () {
        const json = canvas.toJSON();
        console.log(json);
    });

    // 添加图片按钮的点击事件（这里可以简化为直接触发文件输入的点击）
    document.getElementById('loadFromJSON').addEventListener('click', function () {
        const JSONInput = document.getElementById('JSONInput');
        const text = JSONInput.value;

        if (text) {
            canvas.loadFromJSON(text);
        }
    });
});
